<div class="wrapper-bz-page">
    <div class="wrapper-bz-body">
        <div class="column-block block-left" style="width:300px;">
            <div class="column-title">功能模块</div>
            <div class="column-content">
                <div class="top-bar-filter">
                    <input id="m83_select_project_in_project_module" />
                    <button id="m83_button_add_in_project_module" class="btn"><span class="tool-btn-add"><i class="fa fa-plus"></i>新增</span></button>
                </div>
                <div class="column-datagrid" id="m83_ajax_render_project_module">
                </div>
            </div>
        </div>
        <div class="column-block block-right" style="left:310px;">
            <div class="column-title">任务进度</div>
            <div class="column-content">
                <div class="column-filter">
                    <div class="common-search-box">
                        <input style="width:200px" id="search_input_project_task_in_m83" />
                    </div>
                </div>
                <div class="column-datagrid">
                    <table id="table_project_task_in_m83" style="width:100%;height:100%"></table>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="dialog_add_project_module_trunk_in_m83"></div>
<div id="dialog_add_project_module_branch_in_m83"></div>

<div id="dialog_add_project_task_in_m83"></div>
<div id="dialog_edit_project_task_in_m83"></div>

<div id="dialog_view_project_task_in_m83"></div>

<script>
    $(function () {
        var subject_1 = "project_module_trunk_in_m83";
        var subject_2 = "project_module_branch_in_m83";
        var subject_3 = "project_task_in_m83";

        var wrapperIdProjectModule = 'm83_ajax_render_project_module';

        var searchInputId_3 = 'search_input_' + subject_3;

        //列表-对话框-表单
        var tableId_3 = 'table_' + subject_3;

        var tableObject_3 = $('#' + tableId_3);

        var addDialogId_1 = 'dialog_add_' + subject_1;
        var addDialogId_2 = 'dialog_add_' + subject_2;
        var addDialogId_3 = 'dialog_add_' + subject_3;
        var editDialogId_3 = 'dialog_edit_' + subject_3;
        var viewDialogId_3 = 'dialog_view_' + subject_3;

        var addDialogObject_1 = $('#' + addDialogId_1);
        var addDialogObject_2 = $('#' + addDialogId_2);
        var addDialogObject_3 = $('#' + addDialogId_3);
        var editDialogObject_3 = $('#' + editDialogId_3);
        var viewDialogObject_3 = $('#' + viewDialogId_3);

        var addFormId_1 = '#form_add_' + subject_1;
        var addFormId_2 = '#form_add_' + subject_2;
        var addFormId_3 = '#form_add_' + subject_3;
        var editFormId_3 = '#form_edit_' + subject_3;

        var paramDataAdd_1 = {};
        var paramDataAdd_2 = {};
        var paramDataAdd_3 = {};
        var paramDataEdit_3 = {};

        var selectLeftMainId_1 = 0;   //module trunk
        var selectLeftMainId_2 = 0;   //module branch

        var configDialogAdd_1 = {
            href: '/admin/ProjectTask/pageAddProjectModuleTrunk',
            title: '新增项目主模块',
            queryParams: {},
            width: dialogDefaultWidth,
            height: dialogDefaultHeight,
            modal: true,
            buttons: [{
                text: '<i class="fa fa-check fa-btn-cls" style="color:green"></i>保存',
                plain: true,
                handler: function () {
                    paramDataAdd_1 = $(addFormId_1).serializeObject();
                    paramDataAdd_1 = $.extend(paramDataAdd_1, {project_basic_id: selectLeftMainId_1});
                    console.log(paramDataAdd_1);
                    if (!paramDataAdd_1.module_trunk_name) {
                        layer.msg("请填写主模块名称");
                        return;
                    }
                    var loading = layer.load(1, {
                        shade: [0.1, '#fff'] //0.1透明度的白色背景
                    });
                    $.ajax({
                        url: '/api/ProjectModuleTrunk/addProjectModuleTrunk',
                        async: false,
                        dataType: 'json',
                        type: 'post',
                        data: paramDataAdd_1,
                        success: function (resp) {
                            layer.close(loading);
                            if (1 == resp.code) {
                                addDialogObject_1.dialog('close');
                                var treeData = getProjectModuleTrunkTree(selectLeftMainId_1);
                                renderMultipleFloorTagList(wrapperIdProjectModule, treeData, 'module_trunk_name', 'module_branch_name');
                            } else {
                                layer.msg(resp.message);
                            }
                        }
                    });
                }
            }, {
                text: '<i class="fa fa-times fa-btn-cls" style="color:red"></i>取消',
                plain: true,
                handler: function () {
                    addDialogObject_1.dialog('close');
                }
            }]
        };

        var configDialogAdd_2 = {
            href: '/admin/ProjectTask/pageAddProjectModuleBranch',
            title: '新增项目子模块',
            queryParams: {},
            width: dialogDefaultWidth,
            height: dialogDefaultHeight,
            modal: true,
            buttons: [{
                text: '<i class="fa fa-check fa-btn-cls" style="color:green"></i>保存',
                plain: true,
                handler: function () {
                    paramDataAdd_2 = $(addFormId_2).serializeObject();
                    if (!paramDataAdd_2.module_branch_name) {
                        layer.msg("请填写子模块名称");
                        return;
                    }
                    var loading = layer.load(1, {
                        shade: [0.1, '#fff'] //0.1透明度的白色背景
                    });
                    $.ajax({
                        url: '/api/ProjectModuleBranch/addProjectModuleBranch',
                        async: false,
                        dataType: 'json',
                        type: 'post',
                        data: paramDataAdd_2,
                        success: function (resp) {
                            layer.close(loading);
                            if (1 == resp.code) {
                                addDialogObject_2.dialog('close');
                                var treeData = getProjectModuleTrunkTree(selectLeftMainId_1);
                                renderMultipleFloorTagList(wrapperIdProjectModule, treeData, 'module_trunk_name', 'module_branch_name');
                            } else {
                                layer.msg(resp.message);
                            }
                        }
                    });
                }
            }, {
                text: '<i class="fa fa-times fa-btn-cls" style="color:red"></i>取消',
                plain: true,
                handler: function () {
                    addDialogObject_2.dialog('close');
                }
            }]
        };
        var configDialogAdd_3 = {
            href: '/admin/ProjectTask/pageAdd',
            title: '新增项目任务',
            queryParams: {},
            width: dialogDefaultWidth,
            height: dialogDefaultHeight,
            modal: true,
            buttons: [{
                text: '<i class="fa fa-check fa-btn-cls" style="color:green"></i>保存',
                plain: true,
                handler: function () {
                    paramDataAdd_3 = $(addFormId_3).serializeObject();
                    paramDataAdd_3 = $.extend(paramDataAdd_3, {module_branch_id: selectLeftMainId_2});
                    console.log(paramDataAdd_3);
                    if (!paramDataAdd_3.task_name) {
                        layer.msg("请填写任务名称");
                        return;
                    }
                    if (!paramDataAdd_3.plan_start_date) {
                        layer.msg("请填写计划开始时间");
                        return;
                    }
                    if (!paramDataAdd_3.assignee) {
                        layer.msg("请填写受理人");
                        return;
                    }
                    var loading = layer.load(1, {
                        shade: [0.1, '#fff'] //0.1透明度的白色背景
                    });
                    $.ajax({
                        url: '/api/ProjectTask/addProjectTask',
                        async: false,
                        dataType: 'json',
                        type: 'post',
                        data: paramDataAdd_3,
                        success: function (resp) {
                            layer.close(loading);
                            if (1 == resp.code) {
                                addDialogObject_3.dialog('close');
                                tableObject_3.datagrid('reload');
                            } else {
                                layer.msg(resp.message);
                            }
                        }
                    });
                }
            }, {
                text: '<i class="fa fa-times fa-btn-cls" style="color:red"></i>取消',
                plain: true,
                handler: function () {
                    addDialogObject_3.dialog('close');
                }
            }]
        };
        var configDialogEdit_3 = {
            href: '/admin/ProjectTask/pageEdit',
            title: '编辑项目任务',
            queryParams: {},
            width: dialogDefaultWidth,
            height: dialogDefaultHeight,
            modal: true,
            buttons: [{
                text: '<i class="fa fa-check fa-btn-cls" style="color:green"></i>保存',
                plain: true,
                handler: function () {
                    paramDataEdit_3 = $(editFormId_3).serializeObject();
                    console.log(paramDataEdit_3);
                    if (!paramDataEdit_3.task_name) {
                        layer.msg("请填写任务名称");
                        return;
                    }
                    if (!paramDataEdit_3.plan_start_date) {
                        layer.msg("请填写计划开始时间");
                        return;
                    }
                    if (!paramDataEdit_3.assignee) {
                        layer.msg("请填写受理人");
                        return;
                    }
                    var loading = layer.load(1, {
                        shade: [0.1, '#fff'] //0.1透明度的白色背景
                    });
                    $.ajax({
                        url: '/api/ProjectTask/editProjectTask',
                        async: false,
                        dataType: 'json',
                        type: 'post',
                        data: paramDataEdit_3,
                        success: function (resp) {
                            layer.close(loading);
                            if (1 == resp.code) {
                                editDialogObject_3.dialog('close');
                                tableObject_3.datagrid('reload');
                            } else {
                                layer.msg(resp.message);
                            }
                        }
                    });
                }
            }, {
                text: '<i class="fa fa-times fa-btn-cls" style="color:red"></i>取消',
                plain: true,
                handler: function () {
                    editDialogObject_3.dialog('close');
                }
            }]
        };

        var configDatagrid_3 = {
            url: '/api/ProjectTask/getProjectTaskList',
            method: 'post',
            remoteSort: false,
            queryParams: {},
            pageList: [30, 50, 100],
            pageSize: 30,
            pagination: true,
            clickToEdit: false,
            dblclickToEdit: true,
            singleSelect: true,
            checkOnSelect: false,
            selectOnCheck: true,
            rownumbers: false,
            striped: true,
            fitColumns: true,
            fit: true,
            frozenColumns: [[
                {field: 'ck', title: 'ck', checkbox: true},
            ]],
            columns: [[
                {field: 'id', title: 'ID', width: 40, hidden: true},
                {field: 'task_name', title: '任务', width: 300},
                {field: 'plan_start_date', title: '计划开始时间', width: 100},
                {field: 'plan_end_date', title: '计划截止时间', width: 100},
                {field: 'assignee', title: '受理者', width: 100},
                {field: 'complete_progress', title: '完成进度', width: 100},
                {field: 'create_time', title: '创建时间', width: 100},
            ]],
            loadFilter: function (data) {
                return loadFilter(data, true);
            },
            onSelect: function(data){
            },
            onCheck: function (index, row) {

            },
            onUncheck: function (index, row) {

            },
            onLoadSuccess: function () {
            },
            toolbar: [
                {
                    text: '<span class="tool-btn-refresh"><i class="fa fa-refresh"></i>刷新</span>',
                    plain: true,
                    handler: function () {
                        tableObject_3.datagrid('reload');
                    }
                },
                {
                    text:'<span class="tool-btn-add"><i class="fa fa-plus"></i>新增</span>',
                    plain:true,
                    handler:function(){
                        if(0 == selectLeftMainId_2){
                            layer.msg("请选择要添加任务的子模块");
                            return false;
                        }
                        addDialogObject_3.dialog(configDialogAdd_3);
                    }
                },
                {
                    text:'<span class="tool-btn-edit"><i class="fa fa-pencil"></i>编辑</span>',
                    plain:true,
                    handler:function(){
                        var rows = tableObject_3.datagrid("getChecked");
                        if(0 == rows.length){
                            layer.msg("请勾选要编辑的数据");
                            return false;
                        }
                        if(1 < rows.length){
                            layer.msg("仅支持单条数据编辑");
                            return false;
                        }
                        configDialogEdit_3.queryParams = {id:rows[0].id};
                        editDialogObject_3.dialog(configDialogEdit_3);
                    }
                },
                {
                    text: '<span class="tool-btn-delete"><i class="fa fa-trash"></i>删除</span>',
                    plain: true,
                    handler: function () {
                        var arrCheckId = getDatagridCheckedRowId(tableObject_3, "删除");
                        if (!arrCheckId) {
                            return false;
                        }
                        var confirm = layer.confirm('你确定要删除?', {title: '执行操作', btn: ['是', '否']}, function () {
                            $.ajax({
                                url: '/api/ProjectTask/deleteMultiProjectTask',
                                type: 'post',
                                data: {"arr_id": arrCheckId},
                                dataType: 'json',
                                success: function (resp) {
                                    layer.close(confirm);
                                    if (1 == resp.code) {
                                        tableObject_3.datagrid('reload');
                                    } else {
                                        layer.msg(resp.message);
                                    }
                                }
                            });
                        });
                    }
                }
            ]
        };
        clearDialogHtml([addDialogId_1, addDialogId_2, addDialogId_3]);
        tableObject_3.datagrid(configDatagrid_3);

        var projectOptionList = getProjectBasicOption();
        var selectConfig = {
            data: projectOptionList,
            width:100,
            height:26,
            textField: 'project_name',
            valueField: 'id',
            onSelect: function(item){
                selectLeftMainId_1 = item.id;
                var treeData = getProjectModuleTrunkTree(selectLeftMainId_1);
                renderMultipleFloorTagList(wrapperIdProjectModule, treeData, 'module_trunk_name', 'module_branch_name');

                configDatagrid_3.queryParams = {project_basic_id: selectLeftMainId_1};
                tableObject_3.datagrid(configDatagrid_3);
            }
        }
        $('#m83_select_project_in_project_module').combobox(selectConfig);
        $('#m83_select_project_in_project_module').combobox('select', projectOptionList[0].id);

        SearchCombobox(searchInputId_3, tableId_3, function (val, name) {
            configDatagrid_3.queryParams = {content_type: 1};
            configDatagrid_3.queryParams[name] = val;
            tableObject_3.datagrid(configDatagrid_3);
        }, ['ck', 'id']);

        function getProjectBasicOption(){
            var respData = [];
            $.ajax({
                url: '/api/ProjectBasic/getProjectBasicOption',
                async: false,
                type: 'post',
                data: {is_show: 1},
                success: function (resp) {
                    if (1 == resp.code) {
                        respData = resp.data;
                    }
                }
            });
            return respData;
        }

        function getProjectModuleTrunkTree(projectBasicId) {
            var respData = [];
            $.ajax({
                url: '/api/ProjectModuleTrunk/getProjectModuleTrunkTree',
                async: false,
                type: 'post',
                data: {project_basic_id: projectBasicId},
                success: function (resp) {
                    if (1 == resp.code) {
                        respData = resp.data;
                    }
                }
            });
            return respData;
        }

        $("#m83_button_add_in_project_module").click(function(){
            if(0 == selectLeftMainId_1){
                layer.msg("请勾选对应的项目");
                return false;
            }
            addDialogObject_1.dialog(configDialogAdd_1);
        });

        //删除整个trunk模块
        $(document).on("click", ".btn-delete-group-tag-item", function () {
            var curItem = $(this);
            var parentItem = curItem.parent(".box-group-tag-item");
            var trunkId = parentItem.data("id");
            console.log("trunk id:", trunkId);
            var confirm = layer.confirm('你确定要删除?', {title: '执行操作', btn: ['是', '否']}, function () {
                $.ajax({
                    url: '/api/ProjectModuleTrunk/deleteProjectModuleTrunk',
                    type: 'post',
                    data: {"id": trunkId},
                    dataType: 'json',
                    success: function (resp) {
                        layer.close(confirm);
                        if (1 == resp.code) {
                            parentItem.remove();
                            tableObject_3.datagrid('reload');
                        } else {
                            layer.msg(resp.message);
                        }
                    }
                });
            });

            configDatagrid_3.queryParams = {
                project_basic_id: selectLeftMainId_1,
            };
            tableObject_3.datagrid(configDatagrid_3);
        });

        //删除branch模块
        $(document).on("click", ".tag-item .fa-trash", function () {
            var curItem = $(this);
            var parentItem = curItem.parent(".tag-item");
            var branchId = parentItem.data("id");
            console.log("branch id:", branchId);
            var confirm = layer.confirm('你确定要删除?', {title: '执行操作', btn: ['是', '否']}, function () {
                $.ajax({
                    url: '/api/ProjectModuleBranch/deleteProjectModuleBranch',
                    type: 'post',
                    data: {"id": branchId},
                    dataType: 'json',
                    success: function (resp) {
                        layer.close(confirm);
                        if (1 == resp.code) {
                            parentItem.remove();
                            tableObject_3.datagrid('reload');
                        } else {
                            layer.msg(resp.message);
                        }
                    }
                });
            });

            configDatagrid_3.queryParams = {
                project_basic_id: selectLeftMainId_1,
            };
            tableObject_3.datagrid(configDatagrid_3);
        });

        //点击标题，刷新task列表
        $(document).on("click", ".box-group-tag-item .title", function () {
            var curItem = $(this);
            var parentItem = curItem.parent(".box-group-tag-item");
            parentItem.addClass("selected-hollow");
            parentItem.siblings(".box-group-tag-item").removeClass("selected-hollow");
            var trunkId = parentItem.data("id");
            configDatagrid_3.queryParams = {
                module_trunk_id: trunkId,
            };
            tableObject_3.datagrid(configDatagrid_3);
        });

        //点击tag，刷新task列表
        $(document).on("click", ".tag-item", function () {
            var curItem = $(this);
            var branchId = curItem.data("id");

            curItem.closest(".box-group-tag-list").find(".tag-item").removeClass("selected-solid");
            curItem.addClass("selected-solid");
            selectLeftMainId_2 = branchId;
            configDatagrid_3.queryParams = {
                module_branch_id: branchId,
            };
            tableObject_3.datagrid(configDatagrid_3);
        });

        //点击tag，刷新task列表
        $(document).on("click", ".btn-add-tag-item", function () {
            var curItem = $(this);
            var trunkItem = curItem.closest(".box-group-tag-item");
            var trunkId = trunkItem.data("id");
            configDialogAdd_2.queryParams = {module_trunk_id: trunkId};
            addDialogObject_2.dialog(configDialogAdd_2);
        });


    });
</script>